<template>
  <div class="indicatorLight">
    <div class="indicatorLightBox" v-for="item in list" :key="item.key">
      <span class="title">{{ item.label }}</span>
      <a-tooltip v-for="ele in item.light" :key="ele.tdh">
        <template slot="title">
          通道编号:{{ ele.tdh }}，EIRP:{{ ele.eirp }}，信噪比:{{ ele.xzb }}，频偏:{{ ele.pp }}，错字数:{{
            ele.tbzjczs
          }}，状态:{{ formatStatus(ele.status) }}，锁定时间:{{ ele.sjxx }}
        </template>
        <div class="LightBox">
          <div :class="formatColor(ele.status)"></div>
          <span class="">{{ ele.tdh }}</span>
        </div>
      </a-tooltip>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
export default {
  data() {
    return {
      list: [],
      url: {
        list: '/dcpr/dcprPassagewayInfo/list'
      },
      timerLED: null
    }
  },
  created() {
    for (let i = 1; i < 10; i++) {
      if (i == 9) {
        this.list.push({
          label: `国际通道`,
          key: Math.floor(Math.random() * 100000)
            .toString()
            .padStart(5, '0'),
          light: []
        })
      } else {
        this.list.push({
          label: `国内通道${i}`,
          key: Math.floor(Math.random() * 100000)
            .toString()
            .padStart(5, '0'),
          light: []
        })
      }
    }
    this.list.forEach((element, index) => {
      if (element.label == '国际通道') {
        for (let i = 1; i < 34; i++) {
          // element.light.push({ tdh: index * 50 + i, status: Math.floor(Math.random() * (3 - 1 + 1)) + 1, eirp: 44, xzb: 15, PP: '-2', sjxx: '2021-07-16', tbzjczs: 0 })
          element.light.push({
            tdh: i,
            status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
            eirp: 44,
            xzb: 15,
            PP: '-2',
            sjxx: '2021-07-16',
            tbzjczs: 0
          })
        }
      } else {
        if (element.label == '国内通道8') {
          for (let i = 1; i < 31; i++) {
            element.light.push({
              tdh: index * 50 + i,
              status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
              eirp: 44,
              xzb: 15,
              PP: '-2',
              sjxx: '2021-07-16',
              tbzjczs: 0
            })
          }
        } else {
          for (let i = 1; i < 51; i++) {
            element.light.push({
              tdh: index * 50 + i,
              status: Math.floor(Math.random() * (3 - 1 + 1)) + 1,
              eirp: 44,
              xzb: 15,
              PP: '-2',
              sjxx: '2021-07-16',
              tbzjczs: 0
            })
          }
        }
      }
    })
    console.log('this.list', this.list)
  },
  mounted() {
    console.log(this.list, 'list')
    this.startTimer()
  },
  destroyed() {
    this.stopTimer()
  },
  methods: {
    startTimer() {
      if (this.timerLED) {
        clearInterval(this.timerLED)
      }
      this.timerLED = setInterval(() => {
        this.getListData()
      }, 1000)
    },
    stopTimer() {
      clearInterval(this.timerLED)
    },
    formatStatus(value) {
      let val = value.toString()
      if (val == 'zc') {
        return '正常 '
      } else if (val.includes('yc')) {
        return '异常 '
      } else {
        return '无 '
      }
    },
    formatColor(value) {
      let val = value.toString()
      if (val.includes('yc')) {
        return 'redColor'
      } else if (val == 'zc') {
        return 'greenColor'
      } else {
        return 'greyColor'
      }
    },
    getListData() {
      let that = this
      getAction(this.url.list, { pageSize: -1 }).then(res => {
        // console.log(res.result.records)
        let data = res.result.records

        data.forEach(element => {
          // let index = Math.floor((element.tdh - 1) / 50) + 1
          // let Index = this.list[index - 1].light.findIndex(i => i.tdh == element.tdh)
          // this.$set(this.list[index - 1].light, Index, element)
          let tdh = element.tdh
          let index, lightTdh

          if (tdh >= 401 && tdh <= 433) {
            // 国际通道
            index = 8
            lightTdh = tdh - 400
          } else {
            // 国内通道
            index = Math.floor((tdh - 1) / 50)
            lightTdh = tdh
          }
          if (index < 0 || index >= this.list.length) return
          const lightList = this.list[index].light
          const lightIndex = lightList.findIndex(i => i.tdh === lightTdh)
          if (lightIndex !== -1) {
            this.$set(this.list[index].light, lightIndex, element)
          }
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.indicatorLight {
  display: flex;
  flex-wrap: wrap;

  .indicatorLightBox {
    position: relative;
    width: 30%;
    // height:220px;
    padding: 15px 10px;
    margin: 10px;
    border: 1px solid #ebcbbe;
    display: flex;
    flex-wrap: wrap;

    .LightBox {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 10%;
    }

    span {
      color: #fff;
    }

    span.title {
      display: block;
      width: 100px;
      // height:30px;
      position: absolute;
      top: -15px;
      text-align: center;
      // background: white;
      background: url(~@/assets/slices/big-bgi.png) center !important;
    }

    .greyColor,
    .redColor,
    .greenColor {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin: 5px;
    }

    .greyColor {
      background: rgb(78, 78, 78);
    }

    .redColor {
      background: red;
    }

    .greenColor {
      background: rgb(106, 161, 24);
    }
  }
}
</style>
